import React from 'react';
// 验证码组件

// 验证码是后端调用一个第三方的插件，然后形成的一个随机的 img 图片路径然后将该
// 图片路径返回给前端前端展示处理就是验证码效果

import axios from 'axios'
import { useEffect,useState,forwardRef,useImperativeHandle } from 'react';
import Pts from 'prop-types'

const Captcha = forwardRef((props,ref) => {
	const [imgurl,setImgUrl] = useState('')
	useEffect(() => {
		getCaptcha()
	},[])
	const getCaptcha = () => {
		axios.get('https://reactapi.iynn.cn/captcha/api/math').then((res)=>{
			console.log(res);
			if(res.status === 200){
				setImgUrl(res.data.img)
				// 将后端返回的验证码对应的唯一的key值保存在父组件中，这样不会导致第二个验证码组件复用的时候
				// 第二次返回的key覆盖第一次返回的key
				// 通过子传父的方式，将key传递给父组件
				props.saveKey(res.data.key)
			}
		})
	}

	// 定义一个点击刷新事件
	const loadashFn = () => {
		getCaptcha()
	}

	// 使用 useImperativeHandle 将当前组件自身的方法或数据暴露给父组件，这样父组件就可以
	// 向外暴露成员方法、变量,注意:第一个参数ref为该函数组件的第二个形参 
    useImperativeHandle(ref, () => { return {loadashFn}} )

	return (
		<div>
			<img src={imgurl} alt="" onClick={()=>{loadashFn()}} width={props.w} height={props.h} />
		</div>
	);
})


// 属性约束
Captcha.prototype = {
	saveKey:Pts.func.isRequired,
	w:Pts.number,
	h:Pts.number,
}


// 属性默认值
Captcha.defaultProps = {
	w:140,
	h:40,
}


export default Captcha;
